<template>
  <div class="box">
    <div class="main animation-target">
      <h1>明天后台管理系统</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
        size="medium "
      >
        <el-form-item prop="user">
          <el-input
            type="text"
            v-model="ruleForm.user"
            autocomplete="on"
            placeholder="账号"
            @blur="fn"
          >
            <i
              slot="suffix"
              class="el-icon-close"
              v-show="dflag"
              @click="deleteBtn"
            ></i
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            :type="flag ? 'password' : 'text'"
            v-model="ruleForm.pass"
            autocomplete="off"
            placeholder="密码"
            @keyup.13.native="submitForm('ruleForm')"
          >
            <i
              slot="suffix"
              class="iconfont"
              :class="flag ? 'icon-eyes' : 'icon-eyes-'"
              @click="flag = !flag"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="luflag"
            @click="submitForm('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validatePass, validateUser } from '@/utils/validate.js'
import { Login } from '../api/users.js'
import local from '../utils/locl.js'
import { getlogin } from '../router/index.js'
export default {
  data() {
    return {
      luflag: false,
      dflag: false,
      flag: true,
      ruleForm: {
        pass: '',
        user: ''
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'blur' }],
        user: [{ validator: validateUser, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { code, token, role, msg } = await Login({
            account: this.ruleForm.user,
            password: this.ruleForm.pass
          })
          if (code === 0) {
            this.luflag = true
            setTimeout(() => {
              this.$router.push('/frist')
            }, 1800)
            local.set('token', token)
            local.set('role', role)
            // 调用
            getlogin()
          }
        } else {
          this.$message({
            message: '不好意思，登录失败，账号或密码错误',
            type: 'error'
          })
          return false
        }
      })
    },
    /* 输入数据显示删除按钮 */
    fn() {
      if (this.ruleForm.value !== '') {
        this.dflag = !this.dflag
      }
    },
    /* 点击删除按钮，清空input */
    deleteBtn() {
      this.dflag = !this.dflag
      return (this.ruleForm.user = '')
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  background: url('../assets/images/蓝色碎片飞舞.gif');
  background-color: rgba(0, 0, 0, 0.8);

  /*  background-color: #1e1e1e; */
  display: flex;
  justify-content: center;
  align-items: center;
  .main {
    width: 500px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: '楷体';
    user-select: none;
    h1 {
      line-height: 120px;
      font-size: 54px;
      text-align: center;
      color: #409eff;
      letter-spacing: 5px;
    }
    .el-button {
      width: 100%;
    }
    /deep/.el-input__inner {
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
      width: 300px;
    }
    i {
      cursor: pointer;
    }
  }
}
</style>
